<template lang='pug'>
    div.hydrosContainer
        theme(:isShow='isShow' :obj='obj' @exit='exit')
        div.hydrosTop
            span(class='iconfont icon-ziyuanxhdpi')
            p.title 水圈
            div.topR 
                span(class='iconfont icon-pinglun write')
                span(class='iconfont icon-shouye')
        img.pic(src='/img/tyy/hydrosBg.png')
        div.hydroTitle
            div.titleLeft
                img(src='/img/tyy/doctor.png')
                h3 水圈
            div.post 帖子
                b {{hydrosList.length}}
        bScroll.hydroScroll
            ul.hydrosContent
                li(@click='onShow(item)' v-for='item,index in hydrosList' :key='item.id')
                    div.person
                        img(v-lazy='item.perImg' :key='item.perImg')
                        div.personR
                            p {{item.name}}
                            p {{item.time}}
                    h3.textTitle {{item.title}}
                    p.text {{item.text}}
                    img.textPic(v-lazy='item.imgSrc' :key='item.imgSrc')
                    div.eval
                        p.like
                            span(class='iconfont icon-dianzan')
                            b {{item.goodNum}}
                        p.msg
                            span(class='iconfont icon-xiaoxi')
                            b {{item.list.length}}
</template>
<script>
    import theme from '../components/theme.vue'
    import bScroll from '../components/base/bScroll.vue'
    export default {
        data() {
            return {
                isShow: false,
                hydrosList:[],
                obj:{}
            }
        },
        methods: {
            onShow(item) {
                this.isShow = true
                this.obj = item
            },
            exit(){
                this.isShow = false
            }
        },
        components: {
            theme,
            bScroll
        },
        mounted(){
            this.$axios.get('/api/hydrosList').then(res=>{
                console.log(res.data.data.data)
                this.hydrosList = res.data.data.data
            })
        }
    }
</script>

<style lang="scss" scoped>
    .hydrosContainer{
        width:100vw;
        height:100vh;
        overflow:hidden;
        .hydrosTop{
            height:0.86rem;
            background:#50c6f8;
            font-size:0.3rem;
            color:#fff;
            padding:0.2rem 0.3rem;
            display:flex;
            align-items:center;
            justify-content: space-between;
            span{
                font-size:0.42rem;
            }
            .topR{
                font-size:0.34rem;
                .write{
                    margin-right:0.15rem;
                }
            }
        }
        .pic{
            width:100vw;
            height:3.44rem;
        }
        .hydroTitle{
            height:0.8rem;
            background:#fff;
            padding:0.26rem 0.2rem;
            display:flex;
            align-items:center;
            justify-content: space-between;
            .titleLeft{
                position:relative;
                display:flex;
                align-items:center;
                img{
                    width:1.34rem;
                    height:1.34rem;
                    position:absolute;
                    top:-1.28rem;
                    left:0;
                }
                h3{
                    position:absolute;
                    left:1.56rem;
                    top:-0.18rem;
                    width:0.6rem;
                    font-size:0.3rem;
                    color:#000;
                }
            }
            .post{
                font-size:0.26rem;
                color:#b3b3b3;
                b{
                    margin-left:0.22rem;
                    color:#bd2e30;
                }
            }

        }
        .hydroScroll{
            height:12.5rem;
            overflow:hidden;
        }
        .hydrosContent{
            background:#d2d2d2;
            padding:0.2rem;
            li{
                padding:0.14rem 0.2rem;
                background:#fff;
                border-radius:0.1rem;
                margin-bottom:0.4rem;
                .person{
                    display:flex;
                    align-items:center;
                    margin-bottom:0.1rem;
                    img{
                        width:0.58rem;
                        height:0.58rem;
                        margin-right:0.2rem;
                    }
                    .personR{
                        height:0.58rem;
                        font-size:0.25rem;
                        color:#606060;
                        display:flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                }
                .textTitle{
                    line-height:0.5rem;
                    font-size:0.3rem;
                    color:#222222;
                }
                .text{
                    line-height:0.5rem;
                    font-size:0.3rem;
                    color:#7f7f7f;
                }
                .textPic{
                    width:2.18rem;
                    height:2.18rem;
                    margin-bottom:0.26rem;
                }
                .eval{
                    height:0.3rem;
                    align-items: center;
                    width:100%;
                    display:flex;
                    justify-content: flex-end;
                    p{
                        span{
                            font-size:0.3rem;
                            color:#45559f;
                            margin-right:0.1rem;
                        }
                        b{
                            font-size:0.2rem;
                            color:#aaaaaa;
                        }
                        &.like{
                            margin-right:0.48rem;
                        }
                    }
                }
            }
        }
    }
</style>